// 在Vue2前端项目中，你可以通过以下JavaScript代码来压缩图片：
/**
 * 压缩图片
 * @param {File} file 图片文件对象
 * @param {Function} callback 回调函数，压缩后的图片文件对象作为参数
 */
function compressImage(file, callback) {
  // 需要压缩的图片的最大宽度和高度，你可以根据自己的需要调整
  const maxWidth = 800;
  const maxHeight = 800;

  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    const img = new Image();
    img.src = this.result;
    img.onload = function() {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;
      // 计算宽度和高度的缩放比例
      if (width > height) {
        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }
      // 设置canvas的宽度和高度，并绘制压缩后的图片
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      // 将canvas转换为Blob对象，以便上传
      canvas.toBlob(function(blob) {
        callback(blob);
      }, file.type || 'image/png');
    };
  };
}


// 在使用时，你可以先监听<input type="file">的change事件，获取用户选择的图片文件，然后调用上述compressImage函数进行压缩，并在回调函数中处理压缩后的图片文件对象：

// <input type="file" @change="handleImageChange">

handleImageChange(e) {
  const file = e.target.files[0];
  // 调用压缩函数进行压缩
  compressImage(file, (compressedFile) => {
    // 处理压缩后的图片文件对象
    // ...
  });
}





// vue2前端项目中，用JavaScript写一个上传图片时，压缩图片的方法。使用时，使用element ui 2.15.6版本中的el-upload的http-request的参数的方法调用
/**
 * 压缩图片
 * @param {Object} file 原始图片文件
 * @param {Number} maxWidth 图片最大宽度
 * @param {Number} maxHeight 图片最大高度
 * @param {Function} callback 回调函数
 */
function compressImage(file, maxWidth, maxHeight, callback) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (event) {
    const img = new Image();
    img.src = event.target.result;
    img.onload = function () {
      const canvas = document.createElement("canvas");
      let width = img.width;
      let height = img.height;

      if (width > height) {
        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }

      canvas.width = width;
      canvas.height = height;

      const context = canvas.getContext("2d");
      context.drawImage(img, 0, 0, width, height);
      callback(canvas.toDataURL("image/jpeg", 0.8));
    };
  };
}

// 这个函数接受四个参数：原始图片文件、图片最大宽度、图片最大高度和回调函数。当压缩完成后，会调用回调函数并将压缩后的图片base64字符串作为参数传入。

// 在使用element ui 的el-upload组件的http-request参数调用这个函数时，您可以这样写：

/*<el-upload
  :action="yourUploadUrl"
  :show-file-list="false"
  :on-success="handleSuccess"
  :http-request="uploadImage"
>
  <el-button>上传图片</el-button>
</el-upload>*/


uploadImage(file) {
  const maxWidth = 800; // 压缩后的最大宽度
  const maxHeight = 800; // 压缩后的最大高度
  
  return new Promise((resolve, reject) => {
    compressImage(file, maxWidth, maxHeight, (compressedImgData) => {
      const formData = new FormData();
      formData.append("file", dataURItoBlob(compressedImgData));
      
      const xhr = new XMLHttpRequest();
      xhr.open("POST", this.yourUploadUrl);
      xhr.onload = function () {
        resolve(JSON.parse(xhr.responseText));
      };
      xhr.onerror = function () {
        reject(new Error("上传失败"));
      };
      xhr.send(formData);
    });
  });
},

handleSuccess(response) {
  console.log(response);
}